<template>
  <tr>
    <td><input type="checkbox" :checked="item.checked" @click="$store.commit('changeState',index)"/> <span></span></td>
    <td>{{item.name}}</td>
    <td>{{item.price}}</td>
    <td><button @click="changeNum(-1,index)">-</button>{{item.num}}<button @click="changeNum(1,index)">+</button></td>
    <td>{{item.num*item.price}}</td>
    <td><button @click="remove(index)">删除</button></td>
  </tr>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 't-body',
  props: {
    item: Object,
    index: Number
  },
  methods: {
    ...mapMutations(['removeItem']),
    remove (index) {
      this.removeItem(index)
    },
    changeNum (num, index) {
      const newNum = this.item.num + num
      // console.log(newNum)
      if (newNum < 1) return
      this.$store.commit('changeNum', {
        num,
        index
      })
    }
  }
}
</script>

<style></style>
